<template>
    <el-main>
        <h1 class="title">首页</h1>
        <el-row>
            
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="big">
                <div class="grid-content bg-purple-dark" style="bgckground:#F0B45F">
                    
                    <p>{{ userCount }}</p>
                    <p><i class="el-icon-user"></i>用户总数</p>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="big">
                <div class="grid-content bg-purple-light" style="bgckground:#6BBE6BF">
                   
                    <p> {{ productCount }}</p>
                    <p><i class="el-icon-fold"></i>商品总数</p>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="big">
                <div class="grid-content bg-purple" style="bgckground:#5DB8D3">
                   
                    <p> {{ orderCount }}</p>
                    <p><i class="el-icon-check"></i>订单总数</p>
                </div>
            </el-col>
        </el-row>
    </el-main>
</template>
<script>
import { HomeRight } from "@/request/http";
   export default {
        name:'HomeRight',
        data() {
            return {
                orderCount:0,
                productCount:0,
                userCount:0
            };
        },
        methods:{
            home(){
                // Request.getData({
                //     url: `/api/statistic/base_count.do`,
                //     method: "get"
                //     //    参数名：参数值，参数名：参数值
                //     // data:{username:this.ruleForm.username,password:this.ruleForm.password}
                // })
                HomeRight.then(data=>{
                    data = data.data.data
                    // console.log(data)
                    this.orderCount=data.orderCount
                    this.productCount=data.productCount
                    this.userCount=data.userCount
                })
            },
        },
        mounted(){
            this.home()
        },
   };
</script>
<style lang="scss" scoped>

@import "@/Scss/index.scss";
.el-main{
    background: #f3f3f3;
    padding: 30px;
    box-sizing: border-box;
}
.title{
    @include FontOnly(35px);
    margin-bottom:30px;
}
el-col{
    border-radius: 4px;
}

.bg-purple-dark{
    background: #F0B45E;
}
.bg-purple-light{
    background: #5FB95F;
}
.bg-purple{
    background: #4CB1CF;
}
.grid-content{
    border-radius: 4px;
    min-height: 36px;
    padding: 40px 0;
    text-align: center;
    >p:first-of-type{
        @include FontSize(40px);
        color: white;
    }
    >p:last-of-type{
        @include FontOnly(20px);
        @include Mlt(0,20px);
        color: white;
    }
}
.big{
    transition: all 0.5s;
}
.big:hover{
    opacity: 1;
    color: #333;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}
</style>